<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>儿童乐园登录</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" href="${path}/images/titleico.ico">
    <link rel="stylesheet" href="${path}/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <link href="${path}/iconfont/style.css" type="text/css" rel="stylesheet">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
    <style>
        body{color:#fff; font-family:"微软雅黑"; font-size:14px;}
        .wrap1{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto }/*把整个屏幕真正撑开--而且能自己实现居中*/
        .main_content{background:url(${path}/images/main_bg.png) repeat; margin-left:auto; margin-right:auto; text-align:left; float:none; border-radius:8px;opacity: 0.70;}
        .form-group{position:relative;}
        .login_btn{display:block; background:#3872f6; color:#fff; font-size:15px; width:100%; line-height:50px; border-radius:3px; border:none; }
        .login_input{width:100%; border:1px solid #3872f6; border-radius:3px; line-height:40px; padding:2px 5px 2px 30px; background:none;}
        .icon_font{position:absolute; bottom:15px; left:10px; font-size:18px; color:#3872f6;}
        .font16{font-size:16px;}
        .mg-t20{margin-top:20px;}
        @media (min-width:200px){.pd-xs-20{padding:20px;}}
        @media (min-width:768px){.pd-sm-50{padding:50px;}}
        #grad {
            background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3);
            background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3);
            background: -moz-linear-gradient(#4990c1, #52a3d2, #6186a3);
            background: linear-gradient(#4990c1, #52a3d2, #6186a3);
        }
    </style>
</head>
<body style="background:url(${path}/images/bg.jpg) no-repeat;">
<div class="container wrap1" style="height:450px;">
    <h2 class="mg-b20 text-center">儿童乐园管理登录系统</h2>
    <br/>
    <div class="col-sm-8 col-md-5 center-auto pd-sm-50 pd-xs-20 main_content">
        <form method="post" id="denglu">
            <div class="form-group mg-t20">
                <i class="icon-user icon_font"></i>
                <input type="text" class="login_input" id="username" name="account" autocomplete="off"  autofocus value="" placeholder="请输入用户名" />
            </div>
            <div class="form-group mg-t20">
                <i class="icon-lock icon_font"></i>
                <input type="password" class="login_input" id="password" name="password"autocomplete="off"  value="" placeholder="请输入密码" />
            </div>
            <button onclick="logins();return false" id="login" class="login_btn">登 录</button>
        </form>
    </div>
</div>
<!--脚本-->
<script>
    layui.use("layer");
    function logins() {
        var params=$("#denglu").serialize();
        var name = $("#username").val();
        var pwd = $("#password").val();
        if (name == null || name==""){
            layer.msg("<v style='color:red'>" + "用户名不能为空！" + "</v>", {time: 1200, icon: 5});
            return false;
        }else if (pwd == null || pwd == ""){
            layer.msg("<v style='color:red'>" + "密码不能为空！" + "</v>", {time: 1200, icon: 5});
            return false;
        };
        $.post("${path}/Login/success",params,function (data) {
            if (data.code!=0 && data.code != 2){
                layui.layer.msg("<v style='color:red'>"+"用户名或者密码错误",{icon:5})
            }else if(data.code == 2){
                layui.layer.msg("<v style='color:red'>"+"此用户已经冻结！请联系管理员",{icon:5})
            }else {
                layui.layer.msg("<v style='color:#000000'>"+"登录成功",{icon:1,time:900},function () {
                    location.href="${path}/home/index"
                });
            };
        });
    };
</script>
</body>
</html>